<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>统计工资</title>  
    <style>  
        g.highcharts-grid:nth-child(6) > path {  
            stroke-width: 0;  
        }  
    </style>  
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">  
            $(function () {
                $.ajax({
                    type : 'post',
                    url : '<%=request.getContextPath()%>/count',
                    success : function(res) {

                        $('#container_1').highcharts({
                            chart: {
                                type: 'pie',
                                backgroundColor:"#EEF3FA",
                                x:-200,
                                height: 500,
                                marginLeft:-150

                            },
                            credits: {
                                enabled: false   //右下角不显示LOGO
                            },
                            title: {
                                text: '',
                            },
                            subtitle: {
                                text: '',
                            },
                            exporting: {//Highcharts 图表导出功能模块。
                                enabled: false
                            },
                            colors: ['#E2214E', '#F7B52B', '#0749C3', '#66FE17',
                                '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                            legend: {
                                layout: 'vertical',
                                floating: true,
                                backgroundColor: '#EEF3FA',
                                align: 'right',
                                verticalAlign: 'top',
                                y: 35,
                                x: -20,
                                itemMarginBottom :5,//图例的上下间距
                                maxHeight: 500,
                                symbolHeight: 14,//高度
                                symbolWidth:14
                            },

                            plotOptions: {
                                pie: {
                                    allowPointSelect: false,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: false
                                    },
                                    showInLegend: true,
                                    symbolWidth: 24,
                                    point: {
                                        events: {
                                            legendItemClick: function (e) {
                                                return false; // 直接 return false 即可禁用图例点击事件
                                            }
                                        }
                                    }
                                }
                            },

                            series: [{
                                data: [
                                    [res[0].name+'('+res[0].number+'条)' +'<br><span style="text-align:center;">'+res[0].percent+'%</span>', res[0].percent],
                                    [res[1].name+'('+res[1].number+'条)' +'<br><span style="text-align:center;">'+res[1].percent+'%</span>', res[1].percent],
                                    [res[2].name+'('+res[2].number+'条)' +'<br><span style="text-align:center;">'+res[2].percent+'%</span>', res[2].percent],
                                    [res[3].name+'('+res[3].number+'条)' +'<br><span style="text-align:center;">'+res[3].percent+'%</span>', res[3].percent],
                                    [res[4].name+'('+res[4].number+'条)' +'<br><span style="text-align:center;">'+res[4].percent+'%</span>', res[4].percent],
                                    [res[5].name+'('+res[5].number+'条)' +'<br><span style="text-align:center;">'+res[5].percent+'%</span>', res[5].percent],
                                    [res[6].name+'('+res[6].number+'条)' +'<br><span style="text-align:center;">'+res[6].percent+'%</span>', res[6].percent],
                                    [res[7].name+'('+res[7].number+'条)' +'<br><span style="text-align:center;">'+res[7].percent+'%</span>', res[7].percent],
                                    [res[8].name+'('+res[8].number+'条)' +'<br><span style="text-align:center;">'+res[8].percent+'%</span>', res[8].percent]
                                ]
                            }]
                        });
                    }
                });


        });  
             
    </script>  
    <!--  Highcharts -->
	<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script> 
</head>  
<body>  
    <div id="container_1" style="width:1000px; margin: 0 auto;background-color:#EEF3FA"></div>
    
</body>  
</html> 